<template>
  <div>
    <h1>

    </h1>
    <!-- 查询条件 -->
    <div class="query-form">
      <label for="username">用户名：</label>
      <input v-model="query.username" id="username" type="text" placeholder="请输入用户名">

      <label for="ip">IP 地址：</label>
      <input v-model="query.ip" id="ip" type="text" placeholder="请输入IP地址">

      <label for="status">状态：</label>
      <select v-model="query.status" id="status">
        <option value="">所有状态</option>
        <option value="成功">成功</option>
        <option value="失败">失败</option>
      </select>

      <label for="date">日期：</label>
      <input v-model="query.date" id="date" type="date">

      <label for="ipfsHash">IPFS Hash：</label>
      <input v-model="query.ipfsHash" id="ipfsHash" type="text" placeholder="请输入IPFS Hash">

      <button @click="applyFilter">查询</button>
    </div>

    <!-- 显示日志列表 -->
    <div v-if="filteredLogs.length > 0">
      <table>
        <thead>
          <tr>
            <th>用户名</th>
            <th>IP 地址</th>
            <th>状态</th>
            <th>日期</th>
            <th>IPFS Hash</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="log in currentPageLogs" :key="log.id">
            <td>{{ log.username }}</td>
            <td>{{ log.ip }}</td>
            <td>
              <span :class="{'status-success': log.statusDisplay === '成功', 'status-fail': log.statusDisplay === '失败'}">
                {{ log.statusDisplay }}
              </span>
            </td>
            <td>{{ log.dateTime }}</td>
            <td>{{ log.ipfsHash }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页控件 -->
    <div v-if="totalPages > 1" class="pagination">
      <button :disabled="currentPage <= 1" @click="changePage(currentPage - 1)">上一页</button>
      <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>

      <!-- 跳转到指定页 -->
      <div class="page-input">
        <label for="pageNumber">跳转到:</label>
        <input v-model.number="pageNumber" type="number" min="1" :max="totalPages" />
        <button @click="jumpToPage">跳转</button>
      </div>

      <button :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)" >下一页</button>
    </div>

    <!-- 没有数据的提示 -->
    <div v-else class="no-data-message">
      <p>没有找到更多登录日志。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginLogs',
  data() {
    return {
      logs: [], // 存储从后端获取的所有日志数据
      filteredLogs: [], // 存储过滤后的日志数据
      currentPage: 1, // 当前页码
      limit: 10, // 每页显示条数
      totalPages: 1, // 总页数
      query: {
        username: '', // 查询用户名
        ip: '', // 查询IP地址
        status: '', // 查询状态
        date: '', // 查询日期
        ipfsHash: '', // 查询IPFS Hash
      },
      pageNumber: 1, // 用于跳转到指定的页码
    };
  },
  computed: {
    // 当前页的日志数据
    currentPageLogs() {
      const start = (this.currentPage - 1) * this.limit;
      const end = start + this.limit;
      return this.filteredLogs.slice(start, end);
    }
  },
  methods: {
    // 获取登录日志数据
    async fetchLogs() {
      try {
        const response = await fetch('http://192.168.231.31:8007/query/loginlogs');
        const data = await response.json();
        this.logs = data; // 假设后端返回所有数据
        this.filteredLogs = this.logs; // 初始时，过滤后的数据和所有数据一致
        this.totalPages = Math.ceil(this.filteredLogs.length / this.limit); // 计算总页数
      } catch (error) {
        console.error('获取日志数据失败', error);
      }
    },

    // 应用过滤条件
    applyFilter() {
      // 根据用户输入的条件过滤数据
      this.filteredLogs = this.logs.filter(log => {
        // 检查用户名 (精确匹配)
        if (this.query.username && log.username.toLowerCase() !== this.query.username.toLowerCase()) {
          return false;
        }
        // 检查IP地址 (不区分大小写)
        if (this.query.ip && !log.ip.toLowerCase().includes(this.query.ip.toLowerCase())) {
          return false;
        }
        // 检查状态
        if (this.query.status && log.statusDisplay !== this.query.status) {
          return false;
        }
        // 检查日期 (比较日期部分)
        if (this.query.date && log.dateTime.slice(0, 10) !== this.query.date) {
          return false;
        }
        // 检查IPFS Hash
        if (this.query.ipfsHash && !log.ipfsHash.toLowerCase().includes(this.query.ipfsHash.toLowerCase())) {
          return false;
        }
        return true; // 满足所有条件
      });
      this.currentPage = 1; // 重置页码为第一页
      this.totalPages = Math.ceil(this.filteredLogs.length / this.limit); // 重新计算总页数
    },

    // 分页切换
    changePage(page) {
      if (page < 1 || page > this.totalPages) return; // 防止页码超出范围
      this.currentPage = page;
    },

    // 跳转到指定页
    jumpToPage() {
      if (this.pageNumber >= 1 && this.pageNumber <= this.totalPages) {
        this.currentPage = this.pageNumber;
      } else {
        alert('页码无效！请输入一个有效的页码。');
      }
    }
  },
  created() {
    // 页面初始化时获取数据
    this.fetchLogs();
  }
};
</script>

<style scoped>
/* 设置全局背景色为淡蓝色 */
body {
  background-color: #f0f8ff; /* 淡蓝色 */
  font-family: 'Arial', sans-serif;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

th {
  background-color: #e6f7ff; /* 浅蓝色 */
  color: #333;
}

td {
  background-color: #f9f9f9; /* 淡灰色 */
}

.status-success {
  color: green;
}

.status-fail {
  color: red;
}

.no-data-message {
  text-align: center;  /* 居中显示 */
  font-size: 20px;      /* 字体大小 16px */
  color: #888;          /* 字体颜色可以根据需要设置 */
  margin-top: 20px;     /* 上边距，防止和其他元素紧挨着 */
}

/* 按钮样式 */
button {
  padding: 8px 16px;
  background-color: #58a6ff; /* 淡蓝色 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

button:disabled {
  background-color: #ccc;
}

button:hover:not(:disabled) {
  background-color: #3896f4; /* 深蓝色 */
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 150, 244, 0.5); /* 聚焦时的边框 */
}

/* 查询表单样式 */
.query-form {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.query-form label {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.query-form input, .query-form select {
  padding: 8px;
  margin-right: 15px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.query-form input[type="date"] {
  padding: 6px;
}

.query-form input:focus, .query-form select:focus {
  outline: none;
  border-color: #58a6ff;
}

/* 分页控件样式 */
.pagination {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
}

.pagination button {
  padding: 8px 16px;
  background-color: #58a6ff; /* 默认背景色：淡蓝色 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  margin: 0 5px;
}

.pagination button:disabled {
  background-color: #ddd; /* 禁用状态背景色：灰色 */
  cursor: not-allowed;   /* 禁用状态光标 */
}

.pagination button:hover:not(:disabled) {
  background-color: #3896f4; /* 悬停状态背景色：深蓝色 */
}

.pagination span {
  margin: 0 15px;
  color: #333;
}

.page-input {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.page-input input {
  width: 60px;
  padding: 6px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.page-input button {
  margin-left: 10px;
  padding: 6px 12px;
  background-color: #58a6ff;
  border-radius: 5px;
  color: white;
  border: none;
  margin-right: 15px;
}

.page-input button:hover {
  background-color: #3896f4;
}

/* 没有数据时的提示 */
div[v-else] {
  text-align: center;
  font-size: 16px;
  color: #888;
}

/* 响应式设计：确保表格和表单在小屏幕上适应 */
@media (max-width: 768px) {
  .query-form {
    padding: 15px;
  }

  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-input {
    margin-top: 10px;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px;
  }
}
</style>
